<template>
	<div class="business">
		<!--上边-->
	<div style="height:80px;">
		<div style="margin-top:20px;margin-left:40px;float:left">
			<el-form :inline="true" :model="filters"  ref="filters" :rules="rules" class="demo-form-inline">
				<el-form-item label="选择日期" style="margin-left:0px" prop="date">
						<el-date-picker 
							v-model="timeValue"
							type="daterange"
							range-separator="至"
							start-placeholder="开始日期"
							end-placeholder="结束日期"
							format="yyyy 年 MM 月 dd 日">
					</el-date-picker>
				</el-form-item>
				<el-form-item>
					<el-button icon="el-icon-search" @click='requestList' round>搜索</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>
	<!--饼状图-->
	<el-row class="zhe_xian">
		<el-col :span="24" style='margin-left:55px;'>
			<div v-show="cookieLen!=0" class="grid-content bg-purple-light" id="appCookiePic" style="width:630px;height:400px;display:inline-block;"></div>
			<div v-show="pillarLen!=0" class="grid-content bg-purple-light" id="appPostPic" style="width:700px;height:400px;display:inline-block;"></div>
		</el-col>
	</el-row>	
			<!--中间内容-->
			<h3 style="margin-left:50px;">APP使用情况</h3>
			<el-table 
				:data="tableData"    
				:row-class-name="tableRowClassName"  
				:header-cell-class-name="tableheaderClassName"
				v-loading="listLoading"
				style="width:95%;margin-left:50px;margin-top:30px;"
				>
					<el-table-column
						sortable
						label="APP应用排名">
						<template slot-scope="scope">
							<span>{{scope.row.rank}}名</span>
						</template>
					</el-table-column>
					 <el-table-column 
					prop="appName"
					label="应用名称">
					</el-table-column>
					<el-table-column
					prop="successAccessSize"
					label="授权接口个数">
					</el-table-column>
					<el-table-column
					prop="accessInterfaceSize"
					label="访问接口个数">
					</el-table-column>
					<el-table-column
					prop="totalAccessSize"
					sortable
					label="总访问次数">
					</el-table-column>
					<el-table-column
						sortable
						label="成功率(%)">
						<template slot-scope="scope">
							<span>{{scope.row.successPercent}}%</span>
						</template>
					</el-table-column>
					<el-table-column
						sortable
						label="平均响应时间(ms)">
						<template slot-scope="scope">
							<span>{{scope.row.avgProcessTime}}毫秒</span>
						</template>
					</el-table-column>
					<el-table-column
						fixed="right"
						label="操作">
						<template slot-scope="scope" >
						<el-button type="text" size="small">
							<span @click="applicationDetails(scope.row)">详情</span>
						</el-button>
						</template>
					</el-table-column>
		 </el-table>
		 <!--底部内容-->
		<div class="di">
			<div>
				<el-pagination
					style='text-align: center;'
					background
					layout="prev, pager, next" 
					@current-change="handleCurrentChange" 
					:total="totalCount" >
				</el-pagination>
			</div>
		</div>
		
</div>
</template>
<script>
import util from '../../common/js/date.js';
import  echarts from 'echarts';
import { appList,  appCookie, appPillar, checkLogin } from '../../api/api.js';
export default {
	name:'applyUse',
	data() {
		return {
			timeValue:'',
			size:5,
			pageNumber: 1,
			pageSize: 10,
			startDate:'',
			endDate:'',
			cookieArr:[],//饼状图
			cookieArr2:[],
			pillarArr:[],//柱状图
			pillarArr2:[],
			pillarArr3:[],
			pillarLen:'',
			cookieLen:'',
			totalCount: 0,
			listLoading:false,
			tableData: [],
			dialogFormVisible: false,
			dialogFormVisible1: false,
		};
	},
	methods:{
		//请求日期数据
		requestList(){
			if(this.timeValue==null || this.timeValue.length!=2){
				return
			}
			let start = this.timeValue[0];
			let year = start.getFullYear();
			let month = start.getMonth()+1;
			let datas = start.getDate();
			let end = this.timeValue[1];
			let endyear = end.getFullYear();
			let endmonth = end.getMonth()+1;
			let enddatas = end.getDate();
			this.startDate = (year.toString())+'-'+(month.toString())+'-'+(datas.toString());
			this.endDate = (endyear.toString())+'-'+(endmonth.toString())+'-'+(enddatas.toString());
			this.getUsers();
			this.getUsers2();
			this.getUsers3();
		},		
	//获取信息列表
		getUsers2() {
			let para = {
				pageNumber: this.pageNumber,
				pageSize: this.pageSize,
				startDate: this.startDate,
				endDate: this.endDate
			};
			this.listLoading = true;
			appList(para).then((res) => {
				this.tableData = res.data.list;
				this.totalCount = res.data.total;
				this.listLoading = false;
			});
		},
		//获取饼状图
		getUsers() {
			let para = {
				size: this.size,
				startDate: this.startDate,
				endDate: this.endDate
			};
			this.listLoading = false;
			appCookie(para).then((res) => {
				let list = res.data.list;
				this.cookieLen = list.length;
				for(var i=0; i< list.length; i++){
						var cookieData = {};
						cookieData.value = list[i].totalAccessSize;
						cookieData.name = list[i].appName;
						this.cookieArr.push(cookieData);
						this.cookieArr2.push(list[i].appName);
					}
				this.cookieList(this.cookieArr,this.cookieArr2);
				this.cookieArr=[];
				this.cookieArr2=[];
				this.listLoading = false;
			});
		},
		//获取柱子状图
		getUsers3() {
			let para = {
				size: this.size,
				startDate: this.startDate,
				endDate: this.endDate
			};
			this.listLoading = false;
			appPillar(para).then((res) => {
				this.pillarLen = res.data.list.length;
				for(var i=0; i< res.data.list.length; i++){
					this.pillarArr.push(res.data.list[i].appName);
					this.pillarArr2.push(Number(res.data.list[i].successPercent));
					this.pillarArr3.push(res.data.list[i].totalAccessSize);
				}
					console.log('appName名字......',this.pillarArr,this.pillarArr2,this.pillarArr3);
				this.pillarList(this.pillarArr,this.pillarArr2,this.pillarArr3);	
				this.listLoading = false;
			});
			
		},		
		//应用使用详情
		applicationDetails(row){
			let para=row;
			para.startDate=this.startDate;
			para.endDate=this.endDate;
			console.log(para);
			sessionStorage.setItem('applicationDetails', JSON.stringify(para));
			this.$router.push('/monitor/applyDetail');
		},
		// 分页获取
		handleCurrentChange(val) {
			this.pageNumber = val;
			this.getUsers2();
		},
		onSubmit(formName){
			this.$refs[formName].validate((valid) => {
				if (valid) {
					this.getUsers2();
				} else {
					console.log('error submit!!');
					return false;
				}
			});
		},
		tableheaderClassName() {
			return "table-head-th";
		},
		tableRowClassName({ rowIndex}) {
			if (rowIndex % 2==0) {
				return 'success-row';
			} else if (rowIndex % 2 !==0) {
				return 'warning-row';
			}
			return '';
		},
		cookieList(cookieArr,cookieArr2){
			//响应时间饼状图		
			this.zhe = echarts.init(document.getElementById('appCookiePic'));
			this.zhe.setOption(
				{
		    title : {
		        text: '应用调用次数饼状图',
		        x:'center'
		    },
		    tooltip : {
		        trigger: 'item',
		        formatter: "{a} <br/>{b} : {c} 次 ({d}%)"
		    },
		    legend: {
		        orient: 'vertical',
		        left: 'left',
		        data:cookieArr2
		    },
		    series : [
			        {
			            name: '',
			            type: 'pie',
			            radius : '55%',
			            center: ['50%', '60%'],
			            data:cookieArr,
			            itemStyle: {
			                emphasis: {
			                    shadowBlur: 10,
			                    shadowOffsetX: 0,
			                    shadowColor: 'rgba(0, 0, 0, 0.5)'
			                }
			            }
			        }
			    ]
			});
		},
		pillarList(pillarArr,pillarArr2,pillarArr3){
			//响应时间柱状图
			this.zhu = echarts.init(document.getElementById('appPostPic'));
			this.zhu.setOption(
				{
					title : {
						text: '不同APP调用响应成功率(%)和市占率(%)',
						x:'center'
					},
					tooltip: {
						trigger: "axis",
						show: true,
						backgroundColor: "rgba(16, 34, 79, 0.9)",
						// borderColor: "#274370",
						// textStyle: {
						// 	color: "#fff",
						// 	fontSize: 8,
						// }
					},
					legend: {
						show: true,
						itemWidth: 20,
						itemHeight: 10,
						itemGap: 10,
						textStyle: {
						fontSize: 10,
						color: "#ccc",
						},
					},
					grid: {
						left: 30,
						bottom: 20,
						top: 30,
						right: 30,
					},
					xAxis: {
						data: pillarArr,
						nameTextStyle: {
							fontSize: "10px",
							marginBottom:20
						},
						// 坐标轴刻度相关设置
						axisTick: {
							show: true,
						},
						nameGap: -9,
						// 坐标轴线的相关设置
						axisLine: {
							show: true,
							lineStyle: {
								color: "#414965",
							},
						},
						// 坐标轴刻度标签的相关设置
						axisLabel: {
						// 可以设置成 0 强制显示所有标签
						interval: 0,
						margin: 10, //刻度标签与轴线之间的距离。
						},
					},
					yAxis: [{
						name:'%',
						type: "value",
						nameTextStyle: {
							color: "#fff",
							fontSize: "10px"
						},
						// 坐标轴在grid区域中的分隔线
						splitLine: {
						show: false,
						lineStyle: {
							color: "#414965",
							opacity: 0.3,
						},
						},
						axisTick: {
						show: false,
						},
						axisLine: {
						show: false,
						},
					},
					{
						type: "value",
						name: "市占率(%)",
						min: 0,
						max: 100,
						nameTextStyle: {
						color: "#fff",
						fontFamily: "PingFangSC-Light",
						fontSize: "10px",
						},
						axisLabel: {
						textStyle: {
							color: "#7089ba",
							fontSize: "10px"
						}
						},
						axisTick: {
						show: false,
						},
						axisLine: {
						show: false,
						},
						splitLine: {
						show: true,
						lineStyle: {
							color: "#414965",
							opacity: 0.3,
						},
						},
					},
					],
					series: [
						{
						name: "响应成功率(%)",
						type: "bar",
						barWidth: '20%',
						itemStyle: {
							opacity: 0.1,
							normal: {
							show: true,
							color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
								{
								offset: 0,
								color: "#1134ac",
								},
								{
								offset: 1,
								color: "#4aaaf8",
								},
							]),
							barBorderRadius: 0,
							borderWidth: 0,
							},
						},
						label: {
							show: false,//数据不进行显示
							position: "top",
							distance: 10,
							color: "#fff",
						},
						tooltip: {
							valueFormatter: function (value) {
							return value + "万m³";
							}
						},
						data: pillarArr2,
						},
						/*折线图*/
						{
						name: "APP市占率(%)",
						type: "line",
						yAxisIndex: 1,
						z: 15,
						tooltip: {
							valueFormatter: function (value) {
							return value + "%";
							}
						},
						symbol: "circle",
						// symbolSize: 10,
						itemStyle: {
							normal: {
							color: "#84fbfb",
							borderColor: "#84fbfb",  //拐点边框颜色
							lineStyle: {
								color: "#84fbfb"//折线的颜色
							},
							},
						},
						data: pillarArr3,
						}
					],
			})
		}
	},
	mounted() {
		if(checkLogin(this)){
			
			this.requestList();
		}
	},
	created(){
		const start =new Date();
		const end =new Date();
		this.timeValue =[start,end];
	}
};
</script>
<style scoped>
	.business .el-table .table-head-th{
		background-color:#f4f4f4;
		font-size: large;
	}
	.business{width:90%;margin:10px;}
	.business .di{width:100%;margin-left:0px;position:relative;left:6%;
	 bottom:-50%;line-height:36px;
	 margin-top: 30px;}
</style>
